<template>
  <msg-box :message="message">
    <!-- 图片消息 -->
    <image
      class="message-image"
       mode="widthFix"
      :src="content"
      @tap="previewImage(content)"
      @error="handleImageError"
    />
  </msg-box>
</template>
<script setup lang="ts">
import { computed } from "vue";
import msgBox from "./msg-box.vue";

// 监听消息变化
const message = defineModel("message", {
  type: Object,
  required: false,
  default: () => {},
});

// 解析消息
const content = computed((): string => {
  return message.value.content?.remoteUrl || message.value.content?.url || message.value.content;
});

// 预览图片
const previewImage = (url: string) => {
  uni.previewImage({
    urls: [url],
  });
};

// 处理图片加载失败
const handleImageError = () => {
  message.value.status = "fail";
};
</script>
<style scoped lang="scss">
.message-image {
  max-width: 400rpx;
  border-radius: 10rpx;
}
</style>
